<template>
	<view class="container">
		<view class="tip">
			请上传身份证正反面，拍摄5s的视频用于实名
		</view>
		<view class="card-wrapper">
			<view class="card-item front">
				<!-- 上传按钮 -->
				<view class="btn-upload" @click="uploadIdCard('1')">
					<template v-if="!formData.frontImage">
						<image class="img" src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-upload-bank.png">
						</image>
						<!-- <view class="txt">点击上传人像面</view> -->
					</template>

					<!-- 提示：点击修改 -->
					<view class="text-tips-modify" v-if="formData.frontImage ">
						点击修改
					</view>
				</view>
				<!-- 上传后的图片 -->
				<image class="uploaded-img" mode="aspectFill" :src="formData.frontImage ||
					'https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/bg-card-front.png'
					">
				</image>

				<view class="txt-tips">
					身份证人像面
				</view>
			</view>
			<view class="card-item back">
				<!-- 上传按钮 -->
				<view class="btn-upload" @click="uploadIdCard('2')">
					<template v-if="!formData.revereImage">
						<image class="img" src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-upload-bank.png">
						</image>
						<!-- <view class="txt">点击上传国徽面</view> -->
					</template>

					<!-- 提示：点击修改 -->
					<view class="text-tips-modify" v-if="formData.revereImage">
						点击修改
					</view>
				</view>
				<!-- 上传后的图片 -->
				<image class="uploaded-img" mode="aspectFill" :src="formData.revereImage ||
					'https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/bg-card-back.png'
					">
				</image>

				<view class="txt-tips">
					身份证国徽面
				</view>
			</view>
		</view>
		<button @click="captureVideo" size="primary">点击拍摄视频</button>
		<view v-if="formData.wxVideoStr" class="video">
			<video :src="formData.wxVideoStr" controls></video>
		</view>

		<button @click="goMerchantOcr" type="warn" class="submit-btn">提交实名</button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onlyNumberReg,
		onlyCnReg
	} from "@/utils/regExp";
	import {
		getOsssSignature,
		uploadSignImg
	} from "@/utils/upload";
	import {
		showToast
	} from "@/utils/toast";
	import {
		merchantOcr
	} from "@/api/mine";
	import {
		useStore
	} from "@/store/index";
	import {
		singleTerminalQuery

	} from "@/api/common";

	/** store实例 */
	const store = useStore();
	let infomation = ref(null)
	let base = ref(null)
	let formData = ref({
		userId: store.userInfo.userId,
		frontImage: '', // 证件照正面(人像)
		revereImage: '', // 证件照反面
		wxVideoStr: "",
		oemUserNo: 'BU100002',
		signFileId: "",
		shopFrontImgId: '', //门头照
		shopIndoorImgId: '', //场所环境
		shopCashierImgId: '' //收银台
	});
	onLoad(async (params) => {
		if (params.info) { // 函数可把字符串作为 URI 组件进行编码
			let obj = JSON.parse(decodeURIComponent(params.info))
			console.log("obj-obj", obj)
			infomation.value = obj
			console.log("infomation.value", infomation.value)
			formData.value.signFileId = infomation.value.signId;
			formData.value.shopFrontImgId = infomation.value.shopFrontImgId;
			formData.value.shopIndoorImgId = infomation.value.shopIndoorImgId;
			formData.value.shopCashierImgId = infomation.value.shopCashierImgId;
		}
	})
	onMounted(() => {
		// 获取详情




	});

	function uploadIdCard(type) {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['camera', 'album'], //调用原生相册和原生相机，弹出选择
			success: (res) => {
				let tempFilePath = res.tempFilePaths[0]
				uni.getImageInfo({
					src: tempFilePath,
					success: res => {
						let canvasWidth = res.width; //图片原始长宽
						let canvasHeight = res.height;
						let base = canvasWidth / canvasHeight;
						if (canvasWidth > 400) {
							canvasWidth = 400;
							canvasHeight = Math.floor(canvasWidth / base);
						}
						let img = new Image();
						img.src = tempFilePath; // 要压缩的图片
						let canvas = document.createElement('canvas');
						let ctx = canvas.getContext('2d');
						canvas.width = canvasWidth;
						canvas.height = canvasHeight;

						//  将图片画到canvas上面   使用Canvas压缩
						ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
						let imgSrc = canvas.toDataURL('image/png');
						var xhr = new XMLHttpRequest()
						xhr.responseType = 'blob'
						//如果是指xhr.responseType = 'blob',将返回一个Blob对象，而不是文本；
						xhr.onload = () => {
							let reader = new FileReader()
							reader.onload = (e) => {
								if (type == "1") {
									formData.value.frontImage = e.target.result
								} else {
									formData.value.revereImage = e.target.result
								}

								console.log("form=" + JSON.stringify(formData.value))
							}
							let rs = reader.readAsDataURL(xhr.response)
						}
						xhr.open('get', imgSrc)
						xhr.send()
					}
				});
			}
		})

	}

	function captureVideo() {
		// 调起摄像头
		uni.chooseVideo({
			count: 1,
			sourceType: ['camera'],
			camera: 'front',
			success: (res) => {
				let tempFilePath = res.tempFilePath;
				var xhr = new XMLHttpRequest()
				xhr.responseType = 'blob'
				//如果是指xhr.responseType = 'blob',将返回一个Blob对象，而不是文本；
				xhr.onload = () => {
					let reader = new FileReader()
					reader.onload = (e) => {
						formData.value.wxVideoStr = e.target.result

					}
					let rs = reader.readAsDataURL(xhr.response)
				}
				xhr.open('get', tempFilePath)
				xhr.send()
			}
		});
	};

	function urlToBase64(url) {
		return new Promise((resolve, reject) => {
			var xhr = new XMLHttpRequest()
			xhr.open('get', url, true)
			xhr.responseType = 'blob'
			xhr.onload = function() {
				if (this.status === 200) {
					var blob = this.response
					var fileReader = new FileReader()
					fileReader.onloadend = function(e) {
						var result = e.target.result
						resolve(result)
					}
					fileReader.readAsDataURL(blob)
				}
			}
			xhr.onerror = function() {
				reject()
			}
			xhr.send()
		});
	}
	// 系统识别中
	// function loading() {
	// 	uni.showLoading({
	// 		title: '系统识别中',
	// 		mask: true
	// 	});
	// },
	// function hideLoading() {
	// 	uni.hideLoading();
	// },
	// 提交表单
	function goMerchantOcr() {
		console.log("is=" + JSON.stringify(store.userInfo))
		if (!formData.value.frontImage) {
			showToast("请上传身份证正面");
			return false;
		}
		if (!formData.value.revereImage) {
			showToast("请上传身份证反面");
			return false;
		}
		if (!formData.value.wxVideoStr) {
			showToast("请上传视频");
			return false;
		}
		console.log("shopFrontImgId=" + formData.value.shopFrontImgId)
		merchantOcr(formData.value)
			.then((res) => {

				uni.setStorageSync("lsMerInfoSucced", "1");
				console.log("res-res", res)
				// uni.navigateBack({
				// 	delta: 1 // 默认值是1，表示返回的页面层数
				// });
			uni.reLaunch({
			url: "/pages/login/index"
				});
			})
			.catch((err) => {

			});
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>